<template>
	<view class="box" @click="moreChage=false">
		<!-- #ifdef MP-WEIXIN -->
		<view class="head"
			:style="'padding-top:'+statusBarHeight1+'px;padding-right:'+ (WXwidth + 15) +'px;height:' + (statusBarHeight1 + 44) + 'px'">
		<!-- #endif -->
		<!-- #ifndef MP-WEIXIN -->
		<view class="head"
			:style="'padding-top:'+(statusBarHeight1+10)+'px;height:' + (statusBarHeight1 + 54) + 'px'">
		<!-- #endif -->
			<image class="fanhui" @click="fanhui" src="https://pic.bangbangtongcheng.com/static/fanhui_bai.png"
				mode=""></image>
			<view class="centers">
				选择职位类别
			</view>
			<view class="head_right"></view>
		</view>
			<!-- #ifdef MP-WEIXIN -->
		<view
			:style="'padding-top:'+statusBarHeight1+'px;height:' + (statusBarHeight1 + 44) + 'px;background-color: #64B6A8;'">
		</view>
		<!-- #endif -->
		<!-- #ifndef MP-WEIXIN -->
		<view
			:style="'padding-top:'+statusBarHeight1+'px;height:' + (statusBarHeight1 + 54) + 'px;background-color: #64B6A8;'">
		</view>
		<!-- #endif -->
		<view class="center" ref="introduceId">
			<view class="title">
				职位名称
			</view>
			<view class="pointOut">
				不能填写QQ、微信、电话等联系方式，以及特殊符号
			</view>
			<view class="content">
				<input class="inputs" @input="inputs" v-model="addFuLi" placeholder="输入职位名称" maxlength="20" type="text">
				<span class="inputs_zis">{{addFuLi.length}}/20</span>
			</view>
			<!-- 面包屑 -->
			<view class="crumbs" v-if='!addFuLi'>
				<view class="item" v-if="rank >= 1" @click="huitui(1)">
					<view :class="rank == 1?'text text_active':'text'">
						{{text_one}}
					</view>
					<image class="image" v-if="rank > 1"
						src="https://pic.bangbangtongcheng.com/static/bbzc/recruitmentDetails/zp_05.png" mode="">
					</image>
				</view>
				<view class="item" v-if="rank >= 2" @click="huitui(2)">
					<view :class="rank == 2?'text text_active':'text'">
						{{text_two}}
					</view>
					<image class="image" v-if="rank > 2"
						src="https://pic.bangbangtongcheng.com/static/bbzc/recruitmentDetails/zp_05.png" mode="">
					</image>
				</view>
				<view class="item" v-if="rank >= 3" @click="huitui(3)">
					<view :class="rank == 3?'text text_active':'text'">
						{{text_three}}
					</view>
				</view>
			</view>
		</view>
		<!-- 职位类别 -->
		<scroll-view scroll-y class="scroll-view" 
			:style="'height: calc(100vh - '+ curTop + 'px );'">
			<view class="position"  v-if='!addFuLi'>
				<view class="position_item" v-for="(i,j) in List" :key="j" @click="xuanze(i)">
					<span>{{i.lableName}}</span>
				</view>
			</view>
			<view class="position"  v-else>
				<view class="ssposition_item" v-for="(i,j) in SSList" :key="j" @click="fanhui(1,i.rlableName)">
					<view>{{i.rlableName}}</view>
					<view class='tips'>{{i.lableName+'/'+i.plableName+'/'+i.rlableName}}</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>
<script>
	import permision from "@/js_sdk/wa-permission/permission.js"
	//#ifdef H5
	import wxshare from "@/utils/index.js";
	//#endif
	import {
		mapGetters
	} from "vuex";
	export default {
		data() {
			return {
				userInfo: uni.getStorageSync("Pduser"),
				WXwidth: '',
				addFuLi: "",
				FL_one: [],
				text_one: '请选择一级分类',
				text_two: '请选择二级分类',
				text_three: '请选择职位',
				// 判断当前为第几级分类
				rank: 1,
				curTop: 300,
				// 类别数组
				List:[],
				index:'',
				SSList:[],
			};
		},
		onLoad(options) {
			var than = this;
			// 获取微信小程序胶囊和据右边宽度
			// #ifdef MP-WEIXIN
			// 获取胶囊信息
			let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
			let getWindowInfo = uni.getWindowInfo().screenWidth
			this.WXwidth = getWindowInfo - (menuButtonInfo.right - menuButtonInfo.width)
			// #endif
			this.index = options.index
			this.positionData()
			/* #ifdef H5 */
			this.jinzhi();
			/* #endif */
		},
		mounted() {
			let that = this
			this.$nextTick(function() {
				uni.createSelectorQuery().in(this).select('.scroll-view').boundingClientRect(result => {
					if (result) {
						that.curTop = result.top
					}
				}).exec();
			})
		},
		beforeDestroy(){
      if(index == '1'){
        let pages = getCurrentPages();
        let prevPage = pages[ pages.length - 2 ];  
        prevPage.$vm.positionCategorys = item;  
      }
		},
		computed: {
			...mapGetters(["userid", "islogin", "statusBarHeight1", "userinfo"])
		},
		methods: {
			// 获取职位数据
			positionData(){
				this.$myRequest.get("/api/mobile/personnelOwner/getWholeIndustryType",{
					recruitmentType:this.index
				}).then((res) => {
					this.FL_one = res.industryTypeList
					this.List=this.FL_one
				});
			},
			// 搜索事件
			inputs(e){
				if(!e.detail.value){
					return
				}
				this.$myRequest.get("/api/mobile/personnelOwner/intendedPositionSearch",{
					recruitmentType:this.index,
					searchKeywords:e.detail.value,
				}).then((res) => {
					this.SSList = res.intendedPosition
				});
			},
			xuanze(i){
				this.rank=this.rank + 1
				if(this.rank==2){
					this.text_one=i.lableName
					let List = []
					List = this.FL_one.filter(v=>{
						return v.id == i.id
					})
					this.List = List[0].children
				}else if(this.rank == 3){
					this.text_two=i.lableName
					let index=[]
					let List=[]
					index = this.FL_one.filter(v=>{
						return v.lableName == this.text_one
					})
					List = index[0].children.filter(v=>{
						return v.id == i.id
					})
					this.List = List[0].children
				}else{
					this.fanhui(1,i.lableName)
				}
			},
			huitui(index){
				this.rank=index
				if(index == 1){
					this.text_one = "请选择一级分类"
					this.text_two = "请选择二级分类"
					this.List = this.FL_one
				}else if(index == 2){
					this.text_two = "请选择二级分类"
					let index=[]
					index = this.FL_one.filter(v=>{
						return v.lableName == this.text_one
					})
					this.List = index[0].children
				}
			},
			fanhui(index,item){
				console.log(index,item);
				if(index == '1'){
					let pages = getCurrentPages();
					let prevPage = pages[ pages.length - 2 ];  
					prevPage.$vm.positionCategorys = item;  
				}
				uni.navigateBack({  
          delta: 1
				});
			},
			jinzhi() {
				let _this = this;
				let param = window.location.href.split("#")[0];
				uni.request({
					method: "post",
					data: {
						url: param
					},
					header: {
						"content-type": "application/x-www-form-urlencoded",
					},
					url: "https://www.bangbangtongcheng.com/conven//mob/login/getJsTicket.do",
					success(re) {
						_this.jinzhifx(re.data);
					},
				});
			},
			jinzhifx(data) {
				wxshare.config({
					debug: false, //是否打开调试
					appId: data.appId, // 公众号的唯一标识
					timestamp: data.timestamp, // 生成签名的时间戳
			 	nonceStr: data.nonce, // ，生成签名的随机串
					signature: data.signature, // 签名
					jsApiList: ["hideMenuItems"],
				});
				// 禁止分享
				wxshare.hideMenuItems({
					// 要隐藏的菜单项，只能隐藏“传播类”和“保护类”按钮，所有menu项见附录3
					menuList: [
						"menuItem:share:appMessage",
						"menuItem:share:timeline",
						"menuItem:share:timeline",
						"menuItem:share:qq",
						"menuItem:favorite",
						"menuItem:share:QZone",
						"menuItem:openWithSafari",
					],
				});
			},
		},
	};
</script>
<style lang="less" scoped>
	.box {
		width: 100%;
		min-height: 100vh;
		background-color: #fff;
	}

	.head {
		position: fixed;
		top: 0;
		left: 0;
		width: 750rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 15px;
		background-color: #64B6A8;
		z-index: 1000;

		.fanhui {
			width: 40rpx;
			height: 40rpx;
		}

		.centers {
			font-size: 36rpx;
			font-weight: 400;
			color: #FFFFFF;
		}

		.head_right {
			font-size: 30rpx;
			font-weight: 400;
			color: #FFFFFF;
		}
	}

	.center {
		padding: 40rpx 30rpx 0 30rpx;

		.title {
			font-size: 36rpx;
			font-weight: 400;
			color: #333333;
			margin-bottom: 10rpx;
		}

		.pointOut {
			font-size: 28rpx;
			font-weight: 400;
			color: #999999;
			margin-bottom: 20rpx;
		}

		.content {
			width: 100%;
			height: 60rpx;
			border-radius: 8rpx;
			border-bottom: 1px solid #CCCCCC;
			position: relative;

			.inputs {
				width: 100%;
				height: 100%;
			}

			.inputs_zis {
				position: absolute;
				right: 10rpx;
				top: 50%;
				transform: translateY(-50%);
				font-size: 24rpx;
				font-weight: 400;
				color: #999999;
			}
		}

		.crumbs {
			display: flex;
			align-items: center;
			margin-top: 20rpx;

			.item {
				display: flex;
				align-items: center;

				.text {
					font-size: 28rpx;
					font-weight: 400;
					color: #999999;
				}

				.text_active {
					color: #64B6A8;
				}

				.image {
					width: 30rpx;
					height: 30rpx;
					margin: 0 16rpx;
				}
			}
		}
	}
	.position{
		padding: 0 30rpx;
		margin-top: 12rpx;
		.position_item{
			height: 100rpx;
			display: flex;
			align-items: center;
			font-size: 30rpx;
			font-weight: 400;
			color: #333333;
			border-bottom: 1px solid #CCCCCC;
		}
		.ssposition_item{
			height: 100rpx;
			font-size: 26rpx;
			font-weight: normal;
			color: #000;
			border-bottom: 1px solid #CCCCCC;
			display: flex;
			flex-direction: column;
			justify-content: center;
			.tips{
				font-size: 24rpx;
				font-weight: normal;
				color: #999999;
			}
		}
	}
</style>
